<template>
  <div class="category-container" v-loading="listLoading" :element-loading-text="elementLoadingText">
    <el-tabs>
      <el-tab-pane label="商品分类">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in allCategory" :key="index" :xs="24" :sm="8" :md="8" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '0px' }" >
              <div class = "category-item" @click="handleCategoryDetail(item.category, item.id)">
                <el-tooltip effect="dark" content="点击编辑" placement="top">                   
                  <span>{{item.category}}</span>
                </el-tooltip>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="6">
            <el-button v-if="allCategory.length < 51" @click="addCategoryDialogVisible = true" size="medium" class="el-icon-plus" circle ></el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="categoryName"
      :before-close="categoryClose" 
      :visible.sync="categoryDialogVisible" 
      v-loading="categoryLoading"
      element-loading-text="努力加载中~请稍等"
    >
      <el-scrollbar style="height: 500px;">
        <el-form :model="categoryDetail" label-width="100px">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="categoryName"></el-input>
          </el-form-item>
          <div v-for="(item, index) in goodsList" :key="index">           
            <el-form-item prop="goodsName">
              <el-tag
                closable
                :disable-transitions="false"
                @close="removeGoods(index)"
                type="info">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover">
                  <img :src="item.goodsLogo" width="200px">
                  <span slot="reference">{{item.goodsName}}</span>
                </el-popover> 
              </el-tag>
            </el-form-item>
          </div>
          <el-form-item prop="newCategoryGoods">
            <el-button v-if="goodsList.length < 100" @click="addCategoryGoods()" size="mini" class="el-icon-plus" circle ></el-button>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button @click="categoryClose">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button type="danger" @click="removeCategory">删 除 分 类</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="添加商品分类"
      :before-close="addCategoryClose" 
      :visible.sync="addCategoryDialogVisible" 
      v-loading="categoryLoading"
      element-loading-text="努力加载中~请稍等"
    >
      <el-scrollbar style="height: 500px;">
        <el-form :model="categoryDetail" label-width="100px">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="newCategoryName"></el-input>
          </el-form-item>
          <div v-for="(item, index) in goodsList" :key="index">           
            <el-form-item prop="goodsName">
              <el-tag
                closable
                :disable-transitions="false"
                @close="removeGoods(index)"
                type="info">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover">
                  <img :src="item.goodsLogo" width="200px">
                  <span slot="reference">{{item.goodsName}}</span>
                </el-popover> 
              </el-tag>
            </el-form-item>
          </div>
          <el-form-item prop="newCategoryGoods">
            <el-button v-if="goodsList.length < 100" @click="addCategoryGoods()" size="mini" class="el-icon-plus" circle ></el-button>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button @click="addCategoryClose">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="选择要添加的商品"
      :visible.sync="goodsDialogVisible" 
      v-loading="searchLoading"
      element-loading-text="努力加载中~请稍等"
    >
      <el-scrollbar style="height: 500px;">
        <el-form :model="categoryDetail" :inline="true">
          <el-form-item  prop="categoryName">
            <el-input placeholder="请输入商品名称进行搜索" v-model="goodsName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="queryGoods"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <span style="color:red">注意：已下架商品无法搜索出来</span>
        <div v-for="(item, index) in searchGoodsList" :key="index">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="index">
              <el-tag
                :disable-transitions="false"
                type="info"
                style="margin-top:10px">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover">
                  <img :src="item.goodsLogo" width="200px">
                  <span slot="reference">{{item.goodsName}}</span>
                </el-popover> 
              </el-tag>
            </el-checkbox>
          </el-checkbox-group>         
        </div>
      </el-scrollbar>
      <div slot="footer" style="text-align: center;" class="dialog-footer">
        <el-button type="primary" @click="chooseGoods(checkList)">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getCategory, getCategoryGoods, updateCategory, addCategory, delCategory } from '@/api/category'
  import { searchGoodsByName } from '@/api/goodsList'

  export default {
    data() {
      return {
        listLoading: true,
        categoryLoading: true,
        searchLoading: false,
        chooseAble: true,
        chooseDisable: false,
        categoryId: 1,
        categoryDetail: {},
        elementLoadingText: '努力加载中~请稍等',
        categoryName: "",
        newCategoryName: "",
        allCategory: [],
        goodsList: [],
        checkList: [],
        searchGoodsList: [],
        categoryDialogVisible: false,
        addCategoryDialogVisible: false,
        goodsDialogVisible: false,
        goodsName: ""
      }
    },
    created(){
      this.getAllCategory()
    },
    methods: {
      save(){
        this.$confirm('您确定要更新该分类信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.updateCategoryDetail()
        });
      },
      removeCategory(){
        this.$confirm('您确定要删除该分类信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger '
        }).then(() => {
          this.deleteCategory(this.categoryId)
        });
      },
      async deleteCategory(categoryId) {
        this.categoryLoading = true
        const {code} = await delCategory(categoryId)
        this.categoryLoading = false
        if (code===1000) {
          this.$message({
            type: 'success',
            message: '删除成功'
          });     
        } else {
          this.$message.error('删除失败，请检查网络是否正常');
        }
        this.categoryDialogVisible = false
        this.getAllCategory()
      },
      add() {
        this.$confirm('您确定添加该商品分类吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.addNewCategory()
        });
      },
      async addNewCategory() {
        this.categoryLoading = true
        const categoryInfo = {
          categoryName: this.newCategoryName,
          categoryList: this.goodsList
        }
        const {code} = await addCategory(categoryInfo)
        this.categoryLoading = false
        if (code===1000) {
          this.$message({
            type: 'success',
            message: '添加成功'
          });
        } else {
          this.$message.error('添加失败，请检查网络是否正常');
        }
        this.addCategoryDialogVisible = false
        this.getAllCategory()
      },
      addCategoryClose() {
        this.$confirm('您确定取消添加吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.addCategoryDialogVisible = false
          this.newCategoryName = ""
        });
      },
      async updateCategoryDetail() {
        this.categoryLoading = true
        const category = {
          categoryId: this.categoryId,
          categoryName: this.categoryName,
          categoryList: this.goodsList
        }
        const {code} = await updateCategory(category)
        this.categoryLoading = false
        if (code===1000) {
          this.$message({
            type: 'success',
            message: '更新成功'
          });     
        } else {
          this.$message.error('更新失败，请检查网络是否正常');
        }
        this.categoryDialogVisible = false
      },
      async queryGoods() {
        this.searchLoading = true
        const {data} = await searchGoodsByName(this.goodsName)
        this.searchGoodsList = data
        if (this.searchGoodsList.length == 0) {
          this.$message('无该商品信息，请检查该商品是否已下架');
        }
        this.searchLoading = false
        this.checkList = []
      },
      chooseGoods(checkList) {
        if (checkList.length == 0) {
          this.$message.error('请至少选择一个商品进行添加！');
        } else {
          checkList.forEach(element => {
            this.goodsList.push({
              categoryId: this.categoryId,
              goodsId: this.searchGoodsList[element].id,
              goodsLogo: this.searchGoodsList[element].goodsLogo,
              goodsName: this.searchGoodsList[element].goodsName,
              goodsPrice: this.searchGoodsList[element].goodsPrice
            })
          });
          this.goodsDialogVisible = false
        }
      },
      addCategoryGoods() {
        this.goodsDialogVisible = true
        this.checkList = []
        this.goodsName = ""
        this.searchGoodsList = []
      },
      removeGoods(index) {
        this.$confirm('您确定将该商品从该分类中移除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.goodsList.splice(index,1)
        });
      },
      categoryClose(){
        this.$confirm('您确定取消更新吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.categoryDialogVisible = false
        });
      },
      async getAllCategory() {
        this.listLoading = true
        const {data} = await getCategory()
        this.allCategory = data
        this.listLoading = false
      },
      async handleCategoryDetail(name, id){
        this.categoryId = id
        this.categoryName = name
        this.categoryDialogVisible = true
        this.categoryLoading = true
        const {data} = await getCategoryGoods(id)
        this.goodsList = data
        this.categoryLoading = false
      },
      categoryClose(){
        this.$confirm('您确定取消更新分类信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.categoryDialogVisible = false
        });
      }
    },
  }
</script>
<style lang="scss" scoped>
  .category-item {
    padding: 14px; 
    text-align: center; 
    white-space: nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
    &:hover {
      color: #0095ff;
    }
  }
</style>
